/* pages/user/index.wxss */
$background_color:#f0efff;


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $background_color;
  height: 100vh;
  width: 100vw;

  .banner {
    width: 750rpx;
    height: 584rpx;
  }

  .func-group {
    box-sizing: border-box;
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    width: 686rpx;
    background: #ffffff;
    margin: 120rpx auto 0;
    box-shadow: 0px 3rpx 12rpx 0px rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;

    .func-top {
      height: 136rpx;
      font-size: 36rpx;
      border-bottom: 2rpx solid #f2f2f2;
      margin-bottom: 16rpx;
    }

    .func_bottom {
      display: flex;
      justify-content: space-between;

      .func-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #1677ff;

        .func-item-img {
          width: 120rpx;
          height: 120rpx;
        }

        .integral {
          margin: 10rpx 0;
          text-align: center;
          font-size: 36rpx;
          font-weight: bolder;
        }

        .desc {
          font-size: 28rpx;
        }
      }
    }
  }

  .task-center {
    box-sizing: border-box;
    display: flex;
    padding: 0 36rpx;
    align-items: center;
    margin: 32rpx auto;
    width: 686rpx;
    height: 342rpx;
    border-radius: 16rpx;
    background: #ffffff;
    box-shadow: 0px 3rpx 12rpx 0px rgba(0, 0, 0, 0.08);

    .task-left {
      flex: 1;
      color: #1677ff;
      text-align: center;

      .zh_cn {
        font-size: 32rpx;
        font-weight:bolder;
      }

      .en-us {
        margin-top: 8rpx;
        font-style: 24rpx;
      }
    }

    .task-right {

      .task-img {
        width: 240rpx;
        height: 240rpx;
      }
    }
  }
}